import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:ty_smart_watch/bean/sport_data_bean.dart';
import 'package:ty_smart_watch/bean/sport_recorder_bean.dart';
import 'package:ty_smart_watch/page/sport/controller/sport_controller.dart';

import '../../common/images_url.dart';
import '../../route/routes.dart';

class SportGrid extends StatefulWidget {
  const SportGrid({super.key});

  @override
  State<SportGrid> createState() => _SportGridState();
}

class _SportGridState extends State<SportGrid> {
  SportController sportController = Get.find();

  @override
  Widget build(BuildContext context) {
    return Obx(
      () => GridView.builder(
        shrinkWrap: true,
        physics: const NeverScrollableScrollPhysics(),
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2, childAspectRatio: 1, mainAxisSpacing: 8, crossAxisSpacing: 8),
        itemCount: sportController.sportList.length,
        itemBuilder: (BuildContext context, int index) {
          return GestureDetector(
            onTap: () {
              print('Clicked on $index');
              Get.toNamed(Routes.sportDetailFirstPage,
                  arguments: {"id": sportController.sportList[index].id});
            },
            child: SportDataItem(
              sportData: sportController.sportList[index],
              sportController: sportController,
            ),
          );
        },
      ),
    );
  }
}

class SportDataItem extends StatelessWidget {
  final SportRecorderBean sportData;
  final SportController sportController;

  SportDataItem({super.key, required this.sportData, required this.sportController});

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.all(4),
      child: Stack(
        children: [
          //背景图片
          Container(
              decoration: const BoxDecoration(
                // 边框线宽、颜色
                // border: Border.all(width: 1.0, color: Colors.blue),
                //阴影
                boxShadow: [
                  BoxShadow(
                      color: Colors.grey, offset: Offset(0, 0), blurRadius: 3, spreadRadius: 1),
                ],
                color: Colors.white,
                //圆角半径
                borderRadius: BorderRadius.all(Radius.circular(12.0)),
              ),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  const SizedBox(height: 10),
                  Container(
                    // color: Colors.cyan,
                    padding: const EdgeInsets.all(10),
                    // margin: EdgeInsets.all(10),
                    child: Image.asset(sportData.icon),
                  ),
                ],
              )),

          //右侧数据
          Container(
            margin: const EdgeInsets.fromLTRB(10, 10, 10, 0),
            child: Align(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.end,
                children: [
                  Text(
                    sportData.title,
                    style: TextStyle(color: Color(sportData.color), fontWeight: FontWeight.w900),
                  ),
                  const SizedBox(height: 10),
                  Text((sportData.bean.distance / 1000).toStringAsFixed(2)),
                  const Text("公里", style: TextStyle(fontSize: 10)),
                  Text(sportData.bean.step.toString()),
                  const Text("步", style: TextStyle(fontSize: 10)),
                  const SizedBox(height: 20),
                  Row(
                    crossAxisAlignment: CrossAxisAlignment.end,
                    children: [
                      Image.asset(ICON_HEART, width: 10, height: 10),
                      const SizedBox(width: 2),
                      Baseline(
                        baseline: 0,
                        baselineType: TextBaseline.alphabetic,
                        child: Text(sportData.bean.heart.toString(),
                            style: const TextStyle(fontSize: 18, height: 0.8)),
                      ),
                      const SizedBox(width: 2),
                      const Baseline(
                        baseline: 0,
                        baselineType: TextBaseline.alphabetic,
                        child: Text("次/分", style: TextStyle(fontSize: 8, height: 0.8)),
                      ),
                      const Expanded(child: SizedBox()),
                      Image.asset(ICON_SPORT_CAL1, width: 10, height: 10),
                      const SizedBox(width: 2),
                      Baseline(
                        baseline: 0,
                        baselineType: TextBaseline.alphabetic,
                        child: Text((sportData.bean.cal / 1000).toStringAsFixed(1),
                            style: const TextStyle(fontSize: 18, height: 0.8)),
                      ),
                      const SizedBox(width: 2),
                      const Baseline(
                        baseline: 0,
                        baselineType: TextBaseline.alphabetic,
                        child: Text("千卡", style: TextStyle(fontSize: 10, height: 0.8)),
                      ),
                    ],
                  ),
                ],
              ),
            ),
          )
        ],
      ),
    );
  }
}
